<template>
  <div class="prcList">
    <Loading v-if="loading"></Loading>
    <div class="info" v-else>
      <table class="listInfo" v-if="!showStart">
        <thead>
          <tr>
            <td>编号</td>
            <td>名称</td>
            <td>标题</td>
            <td>链接</td>
            <td>文本</td>
            <td>图片</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in tableData">
            <td>{{item.id}}</td>
            <td>{{item.ad_name}}</td>
            <td>{{item.ad_title}}</td>
            <td>{{item.ad_url}}</td>
            <td>{{item.ad_text}}</td>
            <td>
              <img class="logo" :src="item.ad_logo">
            </td>
            <td>
              <a @click='bannerUp(item)'>编辑</a>
              <a @click='bannerDel(item.id)'>删除</a>
            </td>
          </tr>
        </tbody>
      </table>

      <div class="itemInfo" v-if="showStart">
          <div class="formBox">
              <p class="item"><span class="name">广告图片 ：</span>
                  <img class="t2" :src="date.ad_logo">
                  <input type="file" @change="upImg" id="imgTest" class="mel" accept=".gif,.jpg,.jpeg,.png" name="">
              </p>
              <p class="item"><span class="name">广告名称 ：</span><input v-model="date.ad_name" class="slong" placeholder="请输入内容"></input></p>
              <p class="item"><span class="name">广告标题 ：</span><input v-model="date.ad_title" class="slong" placeholder="请输入内容"></input></p>
              <p class="item"><span class="name">广告链接 ：</span><input v-model="date.ad_url" class="slong" placeholder="请输入内容"></input></p>
              <p class="item"><span class="name">广告文本 ：</span><input v-model="date.ad_text" class="slong" placeholder="请输入内容"></input></p>
              <p class="item inputBox"><button @click="bannerPut" class="submitInput">确定</button><button @click="empty" class="emptyInput">取消</button></p>
          </div>
      </div> 

    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import Loading from '@/components/loading'
import axios from 'axios'
import { Get, Post,Delete,Put} from '@/config/api'
export default {
  name: 'prcList',
  data() {
    return {
      loading: true,//加载中
      showStart:false,//切换
      tableData: [],//表单数据
      listId:'',
      date:{
        ad_name:'',
        ad_title:'',
        ad_url:'',
        ad_text:'',
        ad_logo:''
      }
    }
  },
  mounted() {
    this.getData()
  },
  components: {
    Loading
  },
  methods: {
    //获取数据
    async getData() {
      if (this.Check()) {
        let reg=await Get('/ads',this.$store.state.token)
        console.log(reg)
        this.tableData=reg.data
        this.loading=false
      }
    },
    //编辑广告图
    bannerUp(e){
        this.bannerId=e.id
        this.showStart=true
        this.date.ad_name=e.ad_name
        this.date.ad_title=e.ad_title
        this.date.ad_url=e.ad_url
        this.date.ad_text=e.ad_text
        this.date.ad_logo=e.ad_logo
    },
    //上传图片
    upImg(e){
/*        let that=this
        let reader = new FileReader();
        reader.onload = (function (file) {
            return function (e) {
               that.date.ad_logo=this.result
            };
        })(e.target.files[0]);
        reader.readAsDataURL(e.target.files[0]);*/
        let file = e.target.files[0]; //input 
        if( file.size > 0.3*1024*1024 ){  //用size属性判断文件大小不能超过200k
          alert( "你上传的文件太大了！" ) 
        }else{
          let that=this
          let reader = new FileReader(); 
          reader.readAsDataURL(file); 
          reader.onload = function(e){ 
            var res = this.result; 
            that.date.ad_logo=this.result 
          } 
        }
    },
    //删除广告图
    async bannerDel(e){
        this.$store.dispatch("loadOpen");
        await Delete('/ads/'+e,this.$store.state.token).then(function(){
          alert('删除成功')
        })
        this.$store.dispatch("loadClose");
        this.getData()
    },
    //修改广告图
    async bannerPut(){
        this.$store.dispatch("loadOpen")
        let data
        if(this.date.ad_logo.length<100){
          data={
              "ad_position":1,
              "ad_name":this.date.ad_name,
              "ad_title":this.date.ad_title,
              "ad_url":this.date.ad_url,
              "ad_text":this.date.ad_text
            }
        }else{
          data={
              "ad_position":1,
              "ad_name":this.date.ad_name,
              "ad_title":this.date.ad_title,
              "ad_url":this.date.ad_url,
              "ad_text":this.date.ad_text,
              "ad_logo":this.date.ad_logo
            }
        }
        let reg=await Put('/ads/'+this.bannerId,this.$store.state.token,data)
        this.$store.dispatch("loadClose")
        alert('修改成功')
        this.showStart=false
        this.getData()
    },
    //取消
    empty(){
      this.showStart=false
    }
  }
}

</script>
